<template>
	<view class="big-box flex-col align-center">
		<top-navigation :isFix='true' :isShow="true" bgColor='#CC1D1D' backIconColor='#FFF'>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="nav-bg">
			<view class="success-tip">
				下单成功，请及时支付
			</view>
			<view class="success-time">
				{{orderInfo.create_at}} 下单
			</view>
			<image class="success-icon" src="/static/images/car/success-icon.png" mode=""></image>
		</view>
		<view class="">
			<view class="order-info">
				<view class=" justify-start align-center" style="height: 90rpx;">
					<view class="order-title-one">
						<view class="order-tag ">
							订单编号
						</view>
					</view>
					<view class="">
						{{orderInfo.order_num}}
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						订单金额
					</view>
					<view class="order-content">
						{{orderInfo.price_total}}
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						乘车人
					</view>
					<view class="order-content">
						奔驰S级（4座）
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						联系方式
					</view>
					<view class="order-content">
						沈阳桃仙国际机场
					</view>
				</view>
			</view>
		</view>
		<view class="go-pay center" @tap="$navto('/car/order/order-detail')">
			去支付
		</view>
		<!-- <bottom-nav @pay='foodPay' :money="0"></bottom-nav> -->

	</view>
</template>

<script>
	// import {

	// } from '@/utils/constants.js'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				orderInfo:{},
				gender: 0,
				order_id:429,
				date:'',
				genderList: [{
						val: 0,
						label: '先生'
					},
					{
						val: 1,
						label: '女士'
					},
				]


			}

		},
		computed: {

			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			tabsHeight() {
				return `calc(354rpx + (${this.deviceModel?parseInt(this.statusHeight)/2+'rpx':'0rpx'}))`;
			},

		},
		onLoad(o) {
			if(o.order_id){
				this.order_id = o.order_id
			}
			this.orderDetail()
			this.date = this.$moment().format('YYYY-MM-DD hh-mm')
		},
		onShow() {

		},
		methods: {
			...mapActions(['getOrderDetail']),
			async orderDetail(){
				let res = await this.getOrderDetail({id:this.order_id})
				this.orderInfo = res.info
				console.log('订单详情',res);
			},
			foodPay(){
				this.$navto('/car/order/order-status')
			}
		},
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		padding: 0 0 179rpx 0;
		min-height: 100vh;
		background: rgba(243, 243, 243, 0.95);
		.go-pay{
			width: 280rpx;
			height: 90rpx;
			background: #CC1D1D;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}
		.nav-bg{
			padding:60rpx 40rpx;
			width: 750rpx;
			height: 304rpx;
			background: #CC1D1D;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: relative;
			.success-tip{
				width: 420rpx;
				height: 61rpx;
				font-weight: bold;
				font-size: 42rpx;
				color: #FFFFFF;
			}
			.success-time{
				margin-top: 15rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.success-icon{
							bottom: 33rpx;
							position: absolute;
							right: 40rpx;
							width: 195rpx;
							height: 195rpx;
						}
		}

		.order-info {
			position: relative;
			margin: -90rpx 0 90rpx;
			width: 670rpx;
			// height: 541rpx;
			padding: 0 33rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.order-title-one {
				width: 112rpx;
				margin-right: 72rpx;

				.order-tag {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #8E8E8E;
				}
			}

			.info-sty {
				height: 90rpx;
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.order-title {
				width: 112rpx;
				margin-right: 72rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.order-content {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.user-title {
			margin-bottom: 9rpx;
			width: max-content;
			position: relative;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			z-index: 1;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 147rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}

			.user-tits {
				position: relative;
				z-index: 2;
			}


		}
	}
</style>